import { Form, Button, Upload, Input, Image, Switch } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import React, { useState } from "react";
import { editBanner, getBannerOne } from "./../../../api/banner";

const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
};

const EditBanner = (props) => {
    const [form] = Form.useForm();
    //   console.log(props.history.location);
    const [bannerOne, setBannerOne] = useState();
    // 被编辑轮播图的 id
    const bannerid = props.history.location.search.split("=")[1];
    useState(() => {
        getBannerOne({ bannerid: bannerid }).then((res) => {
            console.log(res.data.data[0].bannertitle);
            setBannerOne(res.data.data);
            form.setFieldsValue({
                bannertitle: res.data.data[0].bannertitle,
                link: res.data.data[0].link,
                isshow: res.data.data[0].isshow,
            });
            if (res.data.data[0].bannerimg !== "") {
                console.log("不为空");
                setUrl(res.data.data[0].bannerimg);
            }
        });
    }, []);

    useState(() => {
        console.log(bannerOne);
    }, [bannerOne]);

    //   console.log(bannerOne);
    const [url, setUrl] = useState("");

    const normFile = (e) => {
        if (e.fileList[0]) {
            const reader = new FileReader();
            reader.onloadend = (e) => {
                setUrl(e.target.result);
            };
            reader.readAsDataURL(e.file); //把图片转换成base64位格式
            return e && e.fileList;
        }
    };
    const onFinish = (values) => {
        // console.log(values);
        values.bannerimg = values.bannerimg[0].thumbUrl;
        values.bannerid = bannerid;
        console.log(values);
        editBanner(values).then((res) => {
            console.log(res.data);
            props.history.go(-1);
        });
    };

    //阻止图片的默认上传
    const beforeUpload = (picture) => {
        return false;
    };
    return (
        <Form
            form={form}
            name="validate_other"
            {...formItemLayout}
            onFinish={onFinish}
        >
            <Form.Item
                {...formItemLayout}
                name="bannertitle"
                label="轮播图标题"
                rules={[
                    {
                        required: true,
                        message: "请输入轮播图标题",
                    },
                ]}
            >
                <Input placeholder="请输入轮播图的标题" />
            </Form.Item>
            <Form.Item
                {...formItemLayout}
                name="link"
                label="link"
                rules={[
                    {
                        required: true,
                        message: "请输入轮播图链接地址",
                    },
                ]}
            >
                <Input placeholder="请输入轮播图链接地址" />
            </Form.Item>
            <Form.Item
                name="isshow"
                label="轮播图状态"
                valuePropName="checked"
                rules={[
                    {
                        required: false,
                        message: "请输入轮播图状态",
                    },
                ]}
            >
                <Switch />
            </Form.Item>
            <Form.Item
                name="bannerimg"
                label="上传图片"
                valuePropName="fileList"
                getValueFromEvent={normFile}
                rules={[
                    {
                        required: true,
                        message: "请选择轮播图片",
                    },
                ]}
            >
                <Upload name="logo" listType="picture" beforeUpload={beforeUpload}>
                    <Button icon={<UploadOutlined />}>Click to upload</Button>
                </Upload>
            </Form.Item>
            <Form.Item
                wrapperCol={{
                    span: 12,
                    offset: 6,
                }}
            >
                <Image src={url} />
            </Form.Item>
            <Form.Item
                wrapperCol={{
                    span: 12,
                    offset: 6,
                }}
            >
                <Button type="primary" htmlType="submit">
                    确认
        </Button>
                <Button
                    type="primary"
                    style={{ color: "red", marginLeft: "100px" }}
                    onClick={() => {
                        props.history.go(-1);
                    }}
                >
                    取消
        </Button>
            </Form.Item>
        </Form>
    );
};
export default EditBanner;
